<template>
  <div>
    <v-page-search>
      <el-form :inline="true"
               :model="trackForm">
        <el-form-item>
          <el-input v-model="trackForm.customerName"
                    style="width: 120px"
                    placeholder="客户单位"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="trackForm.county"
                    style="width: 120px"
                    placeholder="区域"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="trackForm.territory"
                     multiple
                     style="width: 120px"
                     placeholder="所在组">
            <el-option v-for="item in options.territory "
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="trackForm.trackPepole"
                    style="width: 120px"
                    placeholder="主跟进人"></el-input>
        </el-form-item>
      </el-form>
      <div slot="search-but">
        <el-button size="small"
                   type="primary"
                   icon="el-icon-search">搜索</el-button>
        <el-button size="small"
                   type="info"
                   icon="el-icon-delete">清除</el-button>
        <el-button size="small"
                   type="warning"
                   icon="el-icon-plus">添加</el-button>
      </div>
    </v-page-search>
    <track-info :tableData='tableData'></track-info>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getCustomeInfo } from '@/api/custome'
import TrackInfo from './track/track-info'

export default {
  components: {
    TrackInfo
  },
  props: {},
  data() {
    return {
      options: {
        territory: []
      },
      trackForm: {
        customerName: '',
        county: '',
        territory: [],
        trackPepole: ''
      },
      tableData: [],
      // 分页属性
      pagging: {
        total: 0,
        currentPage: 1,
        pageSize: 50,
        sizes: [50, 100, 300, 500, 1000]
      }
    }
  },
  computed: {
    ...mapGetters([
      'appEnum'
    ])
  },
  methods: {
    // 调取客户跟踪表格数据
    getCustomInfo() {
      getCustomeInfo({
        customerName: this.trackForm.customerName,
        county: this.trackForm.county,
        territory: this.trackForm.territory.join(','),
        trackPepole: this.trackForm.trackPepole
      }).then(res => {
        console.log(res.data.data)
        if (res.data.success) {
          const result = res.data.data
          this.tableData = result.data
          this.pagging.total = result.totalCount
          this.pagging.currentPage = result.pageIndex
          this.pagging.pageSize = result.pageSize
          this.loading = false
        }
      })
    },
    // 初始化下拉菜单
    initEnum() {
      this.options.territory = this.appEnum.territory
    }
  },
  mounted() {
    this.initEnum()
    this.getCustomInfo()
  }
}
</script>
<style lang="scss" scoped>
</style>
